import { Points } from './jsx/allLiveEditors'

# Points

`<Points />` renders a cloud of points sharing a single point size and color.

## Props

| Name                | Type      | Default        | Description                           |
| ------------------- | --------- | -------------- | ------------------------------------- |
| `children`          | `Point[]` | `[]`           | array of Point markers to render      |
| `useWorldSpaceSize` | `boolean` | `undefined`    | use world space units for point sizes |

### Using World Space sizes

By default, points are rendered in `view space`, meaninig that their size (in pixels) is constant and not affected by the point's position in the world. In contrast, when the `useWorldSpaceSize` flag is set to `true`, points will be rendered in `world space`, meaning that their size (indicated in world units, i.e. meters) will be calculated based on their distance to the camera.

### Point

```js
type Point = {
  id?: number, // positive integer
  pose: {
    position: { x: number, y: number, z: number },
    orientation: { x: number, y: number, z: number, w: number }
  }
  scale: {
    x: number,
    y: number,
    z: number,
  },
  color: {
    r: number, // between 0 and 1
    g: number, // between 0 and 1
    b: number, // between 0 and 1
    a: number, // between 0 and 1
  },
  points: [{ x: number, y: number, z: number } | [ number, number, number ]] ,
}
```

<Points />
